<template>
  <div>
    <div class="content">
      <div class="home-prolist mt10">
        <!--<scroller style="top: .5rem" :on-refresh="refresh" :on-infinite="infinite" :noDataText="no" ref="my_scroller">-->
        <ul class="group-list">
          <router-link :to="{path:'/groupdetails/',query:{id:1}}">
          <li>
            <img src="./images/pro1.png" class="group-img">
            <div class="group-desc">
              <h2>52°郎酒高纯度500ml*6包邮 配送</h2>
              <div class="fun-box">
                <p> 99人团 <span class="new-price">¥199.00</span></p>
                <p> 单买价：¥219.00</p>
                <button type="button" class="btn-join">去开团></button>
              </div>
            </div>
          </li>
          </router-link>
          <li>
            <img src="./images/pro1.png" class="group-img">
            <div class="group-desc">
              <h2>52°郎酒高纯度500ml*6包邮 配送</h2>
              <div class="fun-box">
                <p> 99人团 <span class="new-price">¥199.00</span></p>
                <p> 单买价：¥219.00</p>
                <button type="button" class="btn-join">去开团></button>
              </div>
            </div>
          </li>
          <li>
            <img src="./images/pro1.png" class="group-img">
            <div class="group-desc">
              <h2>52°郎酒高纯度500ml*6包邮 配送</h2>
              <div class="fun-box">
                <p> 99人团 <span class="new-price">¥199.00</span></p>
                <p> 单买价：¥219.00</p>
                <button type="button" class="btn-join">去开团></button>
              </div>
            </div>
          </li>
        </ul>
        <!--</scroller>-->
      </div>
      <!--<div class="nolist">-->
      <!--<img src="./images/my_notsate.svg">-->
      <!--<span>没有相关记录</span>-->
      <!--</div>-->
    </div>

  </div>
</template>

<script>
  //  import getuser from '@/util/getuser'
  import config from '@/config/config'
  //  import {setCookie, getCookie} from '@/util/user'
  import Vue from 'vue'
  import VueScroller from 'vue-scroller'
  Vue.use(VueScroller)

  export default {
    components: {},
    data(){
      return {};
    },
    mounted(){

    },
    methods: {},
    filters: {},
  }
</script>


<style scoped>

  .mt10{ margin-top:.5rem; }
  .mt40{ margin-top:2rem; }
  .bgf{
    background:#fff;
  }
  .nolist{
    width:100%;
    text-align:center;
    padding-top:3rem;
    color:#666;
  }
  .nolist span{
    display:block;
    font-size:.7rem;
    padding-top:.5rem;
  }
  .group-list{
    margin:.75rem;
    text-align:left;
  }
  .group-list li{
    padding:.5rem;
    background:#fff;
    box-shadow:1px 0 0 0 #f7f7f7;
    border-radius:4px;
    display:flex;
    margin-bottom:.75rem;
  }
  .group-img{
    width:4rem;
    height:4rem;
  }
  .group-desc{
    height:4rem;
    flex:1;
    position:relative;
    padding-left:.6rem;
  }
  .group-desc h2{
    font-weight:normal;
    font-size:.75rem;
    color:#333333;
    line-height:1.2;
    margin-bottom:.4rem;
  }
  .fun-box{
    width:100%;
    position:absolute;
    right:0;
    bottom:0;
    padding-left:.6rem;
  }
  .fun-box p{
    font-size:12px;
    color:#999999;
    line-height:1.5;
  }
  .btn-join{
    position:absolute;
    right:.3rem;
    bottom:0;
    display:inline-block;
    border:0;
    padding:.2rem .5rem;
    background-image:linear-gradient(-145deg, #ff4b4e 0%, #e93b3d 100%);
    border-radius:1rem;
    font-size:.65rem;
    color:#ffffff;
  }
  .new-price{
    font-size:.75rem;
    color:#f74c4e;
    margin-left:.5rem;
  }
</style>
